<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('机台管理')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        .ul_ {
            position: absolute;
            right: 0;
            width: 200px;
            height: 200px;
            z-index: 999999;
            background-color: #fff;
            overflow: auto;
            border: 1px solid #dddddd;
        }
        .ul_::-webkit-scrollbar {
            display: none;
        }
        .ul_ li {
            cursor: pointer;
            width: 100%;
            text-indent: 5px;
            margin: 0;
        }
        .ul_ li:hover {
            background: #c8c8c9;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            机台编码：<input type="text" name="deviceCode"/>
                        </li>
                        <li style="position: relative">
                            机台名称：
                            <input type="text" name="deviceName"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()" @click="customerReset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" @click="additem" shiro:hasPermission="system:customer:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:customer:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:customer:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:customer:remove')}]];
    var prefix = ctx + "system/device";

    var app = new Vue({
        el: '.container-div',
        data: {
            customers: [],
            inputCustomerName: '',
            inputCustomerId: '',
            showCustomerUl: false,
            customerList: []
        },
        methods: {
            additem() {
                localStorage.setItem('jttitle', 'xnz');
                var _url = $.table._option.createUrl;
                $.modal.open('新增机台', _url, '500', '300', null);
            },
            //函数防抖
            customer_debounce(wait){
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.getSelectCustomerData(this.inputCustomerName.trim());
                }, wait)
            }
        },
        created(){
            this.getCustomers();
        },
        mounted(){}
    })

    $(function() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            modalName: "机台管理",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '序号',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'deviceCode',
                    title: '机台编码',
                    align: 'center'
                },
                {
                    field: 'deviceName',
                    title: '机台名称',
                    align: 'center'
                },
                {
                    title: '操作',
                    align: 'center',
                    events: {
                        'click .edit': function(e, value, rowData, index){
                            var id = rowData.id;
                            // var id = rowData.materialId;
                            var _url = $.table._option.createUrl;
                            localStorage.setItem(_url, id.toString());
                            localStorage.setItem('jttitle', '编辑');
                            $.modal.open('编辑机台', _url, '500', '300', null);
                        }
                    },
                    formatter: function(value, row, index){
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs edit ' + editFlag + '" href="#"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });
</script>
</body>
</html>
